<script setup>
import {ref} from 'vue'

let inputValue = ref('')
let maxTime = 2;
let tryTime = 0;
let reconnectTime;
let client;
let hearBeatTime;

function initWebSocket() {
  // 建立和websocket的服务连接
  // 携带参数 --- // 直接在url上的query // 带在请求头上 // 存储在cookie里
  client = new WebSocket('ws://localhost:8080?id=1', ['123']);
  // 监听事件 也可以用 addEventLister 监听
  client.onopen = function () {
    //连接上了
    console.log('连接上了')
    clearTimeout(reconnectTime)
    hearBeat()
  }
  client.onmessage = function (mes) {
    // 后端有消息发来了
    console.log('后端发消息来了：', JSON.parse(mes.data))
    // 收到后端的信息再断开心跳检测
  }
  client.onclose = function () {
    // 关闭
    tryTime += 1;
    reconnect()
    console.log('onclose')
  }
  client.onerror = function () {
    // 错误
    tryTime += 1;
    reconnect()
    console.log('onerror')
  }
}

// 重连
function reconnect() {
  console.log('tryTime::::',tryTime)
  // 开始之前清除定时器
  clearTimeout(reconnectTime)
  // 用一个定时器防止频繁重连
  if(tryTime > maxTime){
    alert('出现问题，请联系管理员')
    clearTimeout(reconnectTime)
    return
  }
  reconnectTime = setTimeout(() => {
    initWebSocket()
  },2000)

}

function hearBeat(){
  clearTimeout(hearBeatTime)
  hearBeatTime = setInterval(()=>{
    client.send(JSON.stringify({
      type:'心跳',
      mes:'测试'
    }))
  },3000)
}

initWebSocket();

function sendMes() {
  client.send(inputValue.value)
}
</script>

<template>
  <div>
    <div>用户测试</div>
    <div>
      <input v-model="inputValue"/>
      <button @click="sendMes">发送</button>
      <button>关闭</button>
    </div>
  </div>
</template>

<style scoped>

</style>
